<template>
  <div class="con" v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="workmanship">
      <div class="video" :style="{'height':videoHeight + '!important'}">
        <div class="video-content" id="video-box" :style="{'height':videoHeight + '!important'}"></div>
      </div>
      <div class="video-title">{{ videoTitle }}</div>
      <div class="list" v-if="!isShowSet">
        <ul class="list_con clearfix">
          <li v-for="(videoInfo,index) in showList" :key="index" @click="playVideo(videoInfo.videoURL,videoInfo.name)">
            <img :src="videoInfo.imageURL" class="img" :style="{'width':imgWidth,'height':imgHeight}">
            <p>{{ videoInfo.name }}</p>
          </li>
        </ul>
        <div class="lis_page">
          <el-pagination
              :current-page.sync="pageIndex"
              background
              :page-size="3"
              layout="prev, pager, next"
              :total="videoList.length">
          </el-pagination>
        </div>
      </div>
      <div class="list editBox" v-else>
        <span @click="dialogVisible = true">编辑</span>
      </div>
    </div>

    <el-dialog title="栏目设置"
               v-loading="loading"
               :close-on-click-modal="false"
               custom-class="video-dialog" :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="editFrom" label-width="120px">
        <el-form-item label="视频上传：">
          <div class="edit-video-list">
            <div class="edit-item" v-for="(video,index) in editFrom.datalist" :key="index+'right-img'">
              <img :src="video.imageURL">
              <div class="edit-item-title">{{ video.name }}</div>
              <div class="edit-item-action">
                <el-button type="primary" icon="el-icon-edit" @click="editVideo(video)" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" @click="delVideo(video)" circle></el-button>
              </div>
            </div>
            <div class="edit-video-upload" @click="addVideo">
              <i class="iconfont icon-add-select"></i>
            </div>

          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="text" @click="submit()">保存继续编辑</el-button>
        <el-button type="text" @click='submit(true)'>保存返回主页</el-button>
      </span>
    </el-dialog>
    <UploadVideoDialog ref="uploadVideoDialogRef" @save="handleBottomAdd"></UploadVideoDialog>
  </div>
</template>

<script>
import {workmanshipRequest} from "@/utils/http/request";
import UploadVideoDialog from "@/components/UploadVideoDialog";
import fullScreen from "@/assets/image/videoList/fullscreen.png";
import smallScreen from "@/assets/image/videoList/smallscreen.png";

export default {
  components: {
    UploadVideoDialog
  },
  data() {
    return {
      isVideoFull: false,
      loading: false,
      dialogVisible: false,
      videoTitle: "吊顶工艺",
      form: {
        datalist: []
      },
      editFrom: {},
      videoList: [],
      pageIndex: 1,
      imgWidth: '0',
      imgHeight: '0',
      videoHeight: '',
      playIndex: 0
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.editFrom = {...this.form}
      }
    }
  },
  computed: {
    showList() {
      return this.videoList.slice((this.pageIndex - 1) * 3, this.pageIndex * 3)
    }
  },
  props: ["isShowSet"],
  created() {
  },
  mounted() {
    this.initVideo();
    this.getData()
    this.$nextTick(() => {
      const dom = document.querySelector('.workmanship .list_con')
      if (dom) {
        this.imgWidth = dom.offsetWidth * 0.3 + 'px'
        this.imgHeight = dom.offsetWidth * 0.3 / 70 * 39 + 'px'
      }

      const videoDom = document.querySelector('.workmanship .video-content')
      if (videoDom) {
        this.videoHeight = videoDom.offsetWidth / 16 * 9 + 'px'
      }
    })
  },
  methods: {
    //全屏
    fullScreen(dom) {
      let element = dom || document.querySelector("#app");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    playVideo(newUrl, videoTitle) {
      if (newUrl) {
        this.aliPlayer.loadByUrl(newUrl);
        if (videoTitle) {
          this.videoTitle = videoTitle
        }
      }
    },
    // 初始化视频
    initVideo() {
      let source = ''
      if (this.videoList && this.videoList.length > 0) {
        source = this.videoList[0].videoURL
        this.videoTitle = this.videoList[0].name
      }
      this.aliPlayer = new window.Aliplayer({
        id: "video-box",
        height: "calc(100% - 3rem)",
        autoplay: true,
        source: source,
      });

      setTimeout(() => {
        // let fullscreenBtn = document.querySelector('.prism-fullscreen-btn');
        let prismControlBar = document.querySelector('.prism-controlbar');
        // fullscreenBtn.remove();
        let fullBtn = document.createElement('div');
        fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${fullScreen}) no-repeat;
          background-size: contain;
        `
        fullBtn.className = 'full-btn'
        prismControlBar.insertBefore(fullBtn, prismControlBar.children[4])

        fullBtn.addEventListener('click', () => {
          this.isVideoFull = !this.isVideoFull;
          if (!this.isVideoFull) {
            this.exitFullscreen();
            fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${fullScreen}) no-repeat;
          background-size: contain;
        `
          } else {
            this.fullScreen(document.querySelector('#video-box'))
            fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${smallScreen}) no-repeat;
          background-size: contain;
        `
          }
        })

        // 取消全屏
        this.aliPlayer.on('cancelFullScreen', () => {
          this.isVideoFull = false;
          fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${fullScreen}) no-repeat;
          background-size: contain;
        `
        });

        this.aliPlayer.on("ended", () => {
          if (this.videoList && this.videoList.length > 0) {
            if (++this.playIndex > this.videoList.length - 1) {
              this.playIndex = 0
            }
            this.videoTitle = this.videoList[this.playIndex].name
            this.playVideo(this.videoList[this.playIndex].videoURL)
          }
        });
      }, 1000)
    },
    getData() {
      workmanshipRequest.getDiaodingVideo().then(res => {
        const {code, datalist} = res
        if (code === '01') {
          this.form.datalist = datalist
          this.videoList = [...datalist]

          if (this.videoList && this.videoList.length > 0) {
            this.playVideo(this.videoList[0].videoURL, this.videoList[0].name)
          }

        }
      })
    },
    submit(isClose) {
      let isNotOK = this.editFrom.datalist.some(item => {
        if (!item.name || !item.imageURL || !item.videoURL) {

          return true
        }
        return false
      })

      if (isNotOK) {
        this.$message.error( '请填写完整信息')
        return
      }


      workmanshipRequest.setDiaoDingVideoEdit(this.editFrom).then(res => {
        const {code, msg} = res
        if (code === '01') {
          this.$message.success(msg)
          this.dialogVisible = false
          if (isClose) {
            this.$emit('func1', false)//向父组件传值
          }
          this.getData()
        }
      })

    },
    addVideo() {
      this.$refs.uploadVideoDialogRef.openDialog()
    },
    handleBottomAdd(videoInfo) {
      const index = this.editFrom.datalist.findIndex(item => item === videoInfo)
      videoInfo = {
        name: videoInfo.name,
        imageURL: videoInfo.imgURL,
        videoURL: videoInfo.VideoURL,
        is_delete: 0
      }
      let dataList = []
      if (index > -1) {
        dataList = this.editFrom.datalist.map(item => {
          return {...item, is_delete: 0}
        })
      } else {
        dataList = [...this.editFrom.datalist.map(item => {
          return {...item, is_delete: 0}
        }), {...videoInfo, is_delete: 0}]
      }
      this.editFrom.datalist = dataList
    },
    editVideo(videoInfo) {
      videoInfo.imgURL = videoInfo.imageURL
      videoInfo.VideoURL = videoInfo.videoURL
      this.$refs.uploadVideoDialogRef.openDialog(videoInfo)
    },
    delVideo(videoInfo) {
      const index = this.editFrom.datalist.findIndex(item => item === videoInfo)
      this.editFrom.datalist.splice(index, 1)
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/base";

.con {
  width: 100%;
  height: 100%;
  font-size: 12px;

  $video-height: 10rem;

  .edit-video-list {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;

    .edit-item {
      display: inline-block;
      width: 16rem;
      height: $video-height;
      margin-right: $spacing-base;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      margin-bottom: 2rem;

      .edit-item-title {
        height: 2rem;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: $color-alpha-black-80;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      &:hover {
        .edit-item-action {
          display: flex;
        }
      }

      .edit-item-action {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: $color-alpha-black-80;
        display: none;
        align-items: center;
        justify-content: center;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .edit-video-upload {
      width: 16rem;
      height: $video-height;
      border: 1px dashed $color-black-400;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      margin-right: $spacing-base;

      i {
        font-size: 3rem;
        color: $color-black-400;
      }

      &:hover {
        border: 1px dashed $color-info-500;

        i {
          font-size: 3rem;
          color: $color-info-500;
        }
      }
    }
  }

  .workmanship {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .video {
      //height: calc(100% - 334px);
      position: relative;

      .video-content {
        height: calc(100% - 60px);
        width: 100%;
      }
    }
    .video-title {
      line-height: 50px;
      text-align: center;
      color: #42ddff;
      font-size: 21px;
    }

    .list {
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      //margin-top: 70px;
      //position: absolute;
      //bottom: 0;

      .list_con {
        width: 100%;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
          width: 30%;
          cursor: pointer;

          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          p {
            text-align: center;
            color: #42ddff;
            font-size: 21px;
            line-height: 60px;
          }
        }

        &:after{
          display: none;
        }
      }

      .lis_page {
        //position: absolute;
        //left: 50%;
        //bottom: 0;
        //transform: translateX(-50%);
        margin-top: 1rem;
      }

      &.editBox {
        background: #384768;
        border: 1px solid #67b1ea;
        color: #6ef7ff;
        font-size: 20px;
        align-items: center;
        display: flex;
        display: -webkit-flex;
        justify-content: center;

        span {
          cursor: pointer;
        }
      }
    }
  }
}
</style>

<style lang="scss">
@import "../../assets/style/base";

.prism-fullscreen-btn,
.prism-cc-btn {
  display: none;
}

.full-btn:hover {
  -webkit-animation: hoverAnimationScale 1s 1;
}

.video-dialog {
  .video-box {
    display: flex;
    flex-wrap: wrap;

    .video-item {

      margin-right: $spacing-base;
      margin-bottom: $spacing-base;

      .inputDiv {
        width: 100px !important;
      }


      .avatar-uploader {
        display: flex;
        align-items: center;

        .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }

        .el-upload:hover {
          border-color: #409EFF;
        }

        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .avatar {
          width: 100px;
          height: 100px;
          display: block;
          object-fit: contain;
        }
      }
    }
  }
}
</style>
